<template>
  <div class="village-wrap">
    <div class="main g-bkColor">
      <div class="top-part" :style="{ height:topPartHeight + 'px'}">
        <div class="side mR10 g-bkColor2" style="margin-right:10px;">
          <!--小区描述-->
          <div class="warp-detail">
            <div class="title">安庆</div>
            <div class="desc">安徽安庆湖心北路77号</div>
            <div class="alarm-item">
              <ul>
                <li>
                  <i class="icon iconfont icon-fire"></i>
                  <span class="alarm-name">烟感</span>
                  <span class="line"></span>
                  <span class="alarm-num">20</span>
                </li>
                <li>
                  <i class="icon iconfont icon-water-line"></i>
                  <span class="alarm-name">窨井水位</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-smog"></i>
                  <span class="alarm-name">井盖开关</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-parking"></i>
                  <span class="alarm-name">停车位地磁</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-delete"></i>
                  <span class="alarm-name">垃圾桶满溢</span>
                  <span class="line"></span>
                  <span class="alarm-num">2</span>
                </li>
                <li>
                  <i class="icon iconfont icon-speed-dash"></i>
                  <span class="alarm-name">扬尘监测</span>
                  <span class="line"></span>
                  <span class="alarm-num">1</span>
                </li>
                <li>
                  <i class="icon iconfont icon-involve"></i>
                  <span class="alarm-name">门磁</span>
                  <span class="line"></span>
                  <span class="alarm-num">1</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="center mR10 g-bkColor2">
          <!--当前报警-->
          <Alarm-map :dept-id="this.$route.params.deptId"></Alarm-map>
        </div>
        <div class="side g-bkColor2">
          <!--当前报警列表-->
          <Alarm-list :dept-id="this.$route.params.deptId"></Alarm-list>
        </div>
      </div>

      <div class="bottom-part" :style="{ height:bottomPartHeight + 'px'}">
        <div class="side mR10 g-bkColor2" style="margin-right:10px;">
          <!--雷达图-->
          <EnvironmentAware :dept-id="this.$route.params.deptId"></EnvironmentAware>
        </div>
        <div class="center center-list g-bkColor2">
          <!--垃圾箱列表-->
          <Dustbin-list :dept-id="this.$route.params.deptId"></Dustbin-list>
        </div>
        <!--<div class="side">-->
        <!--&lt;!&ndash;充电桩列表&ndash;&gt;-->
        <!--<charger-list :dept-id="this.$route.params.deptId"></charger-list>-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import AlarmDetail from '../../../../components/village/alarmDetailB'
import AlarmMap from '../../../../components/village/alarmMap'
import ChargerList from '../../../../components/village/chargerList'
import EnvironmentAware from './components/environmentAware.vue'
import DustbinList from '../../../../components/village/dustbinList'
import AlarmList from '../../../../components/village/alarmList'

export default {
  name: 'index',
  components: {
    AlarmDetail,
    AlarmMap,
    ChargerList,
    DustbinList,
    AlarmList,
    EnvironmentAware
  },
  data () {
    return {
      centerBoxWidth: 0,
      topPartHeight: 0,
      bottomPartHeight: 0,
      summaryDetail: {}
    }
  },
  computed: {
    ...mapState({
      warnAllData: state => state.event.warnAllData
    })
  },
  created: function () {
    const { warnData } = this.$store.state.event
    if (warnData && warnData.length !== 0) {
      this.$store.commit('setWarnAllData', [])
    }
  },
  mounted () {
    let gWidth =
      this.$base.getDocumentWidth() -
      this.$base.getConst('common', 'sidebarWidth')
    let gHeight =
      this.$base.getDocumentHeight() -
      this.$base.getConst('common', 'headerHeight')
    this.centerBoxWidth = gWidth - 600
    this.topPartHeight = (gHeight - 30) * 0.54
    this.bottomPartHeight = (gHeight - 30) * 0.46
    this.getMainData()
  },
  methods: {
    getMainData () {
      // let url = this.$base.getUrl('summaryByDeptId')
      // let params = {
      //   url: url,
      //   data: {
      //     'deptId': this.$route.params.deptId
      //   }
      // }
      //
      // this.$store.dispatch('postForm', params).then((res) => {
      //   this.summaryDetail = res.result
      // })
    }
  }
}
</script>

<style lang="less" scoped>
.village-wrap {
  width: 100%;
  height: 100%;
  background-color: #202835;
}

.main {
  padding: 10px;
}

.top-part {
  margin-bottom: 10px;
  min-height: 390px;
}

.bottom-part {
  min-height: 290px;
}

.top-part,
.bottom-part {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;

  .side {
    width: 20%;
    border-radius: 4px;
    min-width: 290px;
    max-width: 290px;
    background: rgba(43, 54, 72, 0.95);
  }
  .center {
    width: 100%;
    border-radius: 4px;
    min-width: 548px;
    background: rgba(43, 54, 72, 0.95);
  }
}

.center-list {
  overflow: hidden;
}

.main .mR10 {
  margin-right: 10px;
}

.side-split {
  width: 20%;
  border-radius: 4px;
  min-width: 290px;
  max-width: 290px;
}

.mid-half {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  .half-top {
    margin-bottom: 10px;
  }
  .half-top,
  .half-bottom {
    width: 100%;
    height: 50%;
    border-radius: 4px;
    background: rgba(43, 54, 72, 0.95);
  }
}

.skin-white {
  .title {
    color: #4c6072 !important;
  }
  .alarm-name {
    color: #4c6072 !important;
  }
  .line {
    background-color: #4c6072 !important;
  }
}

.warp-detail {
  padding: 25px 0 0 30px;
  color: #fff;
}

.title {
  font-size: 22px;
}

.desc {
  margin-top: 10px;
  color: #9facc3;
  font-size: 16px;
  font-weight: 600;
}

.alarm-item {
  margin-top: 26px;
  ul li {
    line-height: 10px;
    padding-bottom: 24px;
  }
  i {
    color: #50e3c2;
  }
  .alarm-name {
    margin-left: 10px;
    display: inline-block;
    width: 70px;
  }
  .line {
    vertical-align: middle;
    display: inline-block;
    width: 90px;
    height: 1px;
    background-color: #fff;
    opacity: 0.1;
  }
  .alarm-num {
    margin-right: 22px;
    float: right;
    color: #50e3c2;
    font-size: 14px;
  }
}
</style>
